<template>
  <div class="school">
    <div class="navbar">
      <div class="title">我的网校列表</div>
      <div class="right-menu">
        <logout></logout>
      </div>
    </div>
    <div class="container">
      <div class="addSchool">
        <el-button type="primary" @click="dialogVisible = true">
          <i style="margin-right: 10px" class="el-icon-edit"></i>
          添加网校
        </el-button>
      </div>
      <div class="school-list">
        <el-card
          v-for="(item, index) in schoolList"
          :key="index"
          class="box-card"
        >
          <div class="card">
            <div
              class="item"
              style="
                width: 100px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ item.name }}
            </div>
            <div class="btn" @click="handleClick(item.id)">管理</div>
          </div>
        </el-card>
      </div>
      <div style="clear: both"></div>
      <el-pagination
        style="margin: 20px 11px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>

      <!-- 添加网校弹窗 -->
      <el-dialog title="添加网校" :visible.sync="dialogVisible" width="50%">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="网校名称" prop="name">
            <el-input v-model="ruleForm.name" placeholder="网校名称"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="createSchool"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Logout from "../components/logout";
import { getSchoolList, createSchool } from "../api/school";
export default {
  components: {
    Logout,
  },
  data() {
    return {
      page: 1,
      limit: 20,
      total: 0,
      schoolList: [],
      routes: [],
      dialogVisible: false,
      ruleForm: {
        name: "",
      },
      rules: {
        name: [
          { required: true, message: "网校名称不能为空", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.getSchoolList();
  },
  methods: {
    async getSchoolList() {
      let res = await getSchoolList(this.page, this.limit);
      this.schoolList = res.items;
      this.total = res.total;
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getSchoolList();
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getSchoolList();
    },
    handleClick(id) {
      this.$store.dispatch("user/schoolId", id);
      this.$router.push("/layout");
    },
    async createSchool(){
      let res = await createSchool(this.ruleForm);
      console.log(res);
      this.dialogVisible = false;
      this.getSchoolList();
      this.$message.success("添加网校成功")
    }
  },
};
</script>

<style scoped lang='scss'>
.school {
  box-sizing: border-box;
  .navbar {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 8%);
    .title {
      padding: 20px;
      font-size: 16px;
      line-height: 50px;
    }
    .right-menu {
      width: 60px;
      height: 50px;
      // background-color: rebeccapurple;
      padding-top: 5px;
      float: right;
      margin-right: 20px;
      position: relative;
    }
  }
  .container {
    padding: 0 10px;
    .addSchool {
      width: 100%;
      padding: 20px 11px;
      //   background-color: red;
    }
    .school-list {
      width: 100%;
      .box-card {
        width: 32%;
        height: 68px;
        float: left;
        margin: 10px 10px;
        box-shadow: none;
        border: 1px solid #e6ebf5;
        .card {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .btn {
            font-size: 14px;
            color: #1890ff;
          }
        }
      }
      .box-card:hover {
        height: 68px;
        border: 1px solid transparent;
        box-shadow: 0 0 10px 3px #eee;
      }
    }
  }
}
</style>
